<nz-card [nzSize]="'small'">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm" (ngSubmit)="submitSearch()">
        <nz-form-item>
            <nz-form-label [nzFor]="'title'">标题</nz-form-label>
            <nz-form-control>
                <input nz-input placeholder="标题" [formControlName]="'title'" [attr.id]="'title'" autocomplete="off" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzFor]="'tag'">标签</nz-form-label>
            <nz-form-control>
                <input nz-input placeholder="标签" [formControlName]="'tag'" [attr.id]="'tag'" autocomplete="off" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzFor]="'columnId'">栏目</nz-form-label>
            <nz-form-control>
                <nz-tree-select style="width: 150px;" [nzNodes]="nodes" [formControlName]="'columnId'"
                    nzPlaceHolder="栏目">
                </nz-tree-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control>
                <button nz-button nzType="primary">搜索</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-card>

<nz-card [nzSize]="'small'" class="full-double">
    <div>
        <button nz-button class="mr-10" (click)="add()" *canOperate="'addArticleBtn'">
            <i nz-icon nzType="plus"></i>添加文章</button>
        <button nz-button class="mr-10" (click)="refresh()"><i nz-icon nzType="sync"></i>刷新数据</button>
    </div>
    <div class="mt-10">
        <nz-table #dataTable nzSize="middle" [nzData]="data" nzShowPagination="false" nzFrontPagination="false"
            nzBordered="true">
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="50px">#</th>
                    <th nzAlign="center" nzWidth="120px">栏目</th>
                    <th nzAlign="center">标题</th>
                    <th nzAlign="center" nzWidth="200px">标签</th>
                    <th nzAlign="center" nzWidth="180px">创建时间</th>
                    <th nzAlign="center" nzWidth="180px">排序</th>
                    <th nzAlign="center" nzWidth="120px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of dataTable.data;let i = index">
                    <td nzAlign="center">{{ i + 1 + (page - 1) * size }}</td>
                    <td nzAlign="center">{{ data.columnName }}</td>
                    <td nzAlign="center">{{ data.title }}</td>
                    <td nzAlign="center">
                        <nz-tag style="margin-right: 5px;margin-top: 5px;" nzColor="success"
                            *ngFor="let item of getTagList(data.tags)">{{item}}</nz-tag>
                    </td>
                    <td nzAlign="center">{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
                    <td nzAlign="center">{{ data.sort }}</td>
                    <td nzAlign="center">
                        <button nz-button nzType="default" nzShape="circle" *canOperate="'updateArticleBtn'"
                            (click)="edit(data.id)" class="mr-10"><i nz-icon nzType="edit"></i></button>
                        <button nz-button nzType="default" nzShape="circle" *canOperate="'deleteArticleBtn'"
                            (click)="remove(data.id)" class="mr-10"><i nz-icon nzType="delete"></i></button>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div class="mt-10">
        <nz-pagination [(nzPageSize)]="size" [(nzPageIndex)]="page" [nzTotal]="total" nzShowSizeChanger
            nzShowQuickJumper (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="sizeChange()"></nz-pagination>
    </div>
</nz-card>